<template>
  <view class="history-page">

    <!-- 病史列表 -->
    <view class="section">
      <view class="section-title">
        <view class="section-line"></view>
        <text>我的病史</text>
      </view>
      <view
        class="history-card"
        v-for="(item, idx) in historyList"
        :key="item.id"
      >
        <view class="history-info">
          <view class="history-desc">{{ item.desc }}</view>
          <view class="history-date">{{ item.date }}</view>
        </view>
        <view class="history-delete" @click="onDelete(idx)">
          <text class="iconfont" style="color:#e53935;font-size:40rpx;">🗑️</text>
        </view>
      </view>
    </view>

    <!-- 新增病史按钮 -->
    <view class="add-btn-row" @click="openModal">
      <text class="add-icon">＋</text>
      <text class="add-text">新增病史数据</text>
    </view>

    <!-- 添加弹窗 -->
    <view class="modal-mask" v-if="showAdd" @click.self="closeModal">
      <view class="modal" :class="{ 'modal-animate': showAdd }">
        <input
          class="modal-input"
          v-model="newDesc"
          placeholder="请输入病史描述"
        />
        <view class="modal-date-row">
          <text class="date-icon">📅</text>
          <picker mode="date" :value="newDate" @change="onDateChange">
            <text class="date-text">{{ newDate }}</text>
          </picker>
        </view>
        <button class="modal-btn" @click="onAdd">添加</button>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, onMounted, watch } from 'vue'

// 数据持久化：本地存储key
const STORAGE_KEY = 'HISTORY_LIST'

// 病史数据
const historyList = ref<{ id: number, desc: string, date: string }[]>([])

const showAdd = ref(false)
const newDesc = ref('')
const newDate = ref('2000-12-04')

// 弹窗动画
const openModal = () => {
  showAdd.value = true
}
const closeModal = () => {
  showAdd.value = false
}

const onBack = () => {
  uni.navigateBack()
}
const onDelete = async (idx: number) => {
  // 预留接口对接
  // await apiDeleteHistory(historyList.value[idx].id)
  historyList.value.splice(idx, 1)
  saveToStorage()
}
const onDateChange = (e: any) => {
  newDate.value = e.detail.value
}
const onAdd = async () => {
  if (!newDesc.value.trim()) {
    uni.showToast({ title: '请输入病史描述', icon: 'none' })
    return
  }
  // 预留接口对接
  // await apiAddHistory({ desc: newDesc.value, date: newDate.value })
  historyList.value.push({
    id: Date.now(),
    desc: newDesc.value,
    date: newDate.value
  })
  saveToStorage()
  newDesc.value = ''
  newDate.value = '2000-12-04'
  closeModal()
}

// 数据持久化：保存到本地
function saveToStorage() {
  uni.setStorageSync(STORAGE_KEY, historyList.value)
}
// 数据持久化：从本地读取
function loadFromStorage() {
  const data = uni.getStorageSync(STORAGE_KEY)
  if (data && Array.isArray(data)) {
    historyList.value = data
  }
}

// 页面加载时读取本地数据
onMounted(() => {
  loadFromStorage()
})

// 监听数据变化自动保存
watch(historyList, saveToStorage, { deep: true })

// 预留接口对接函数
// async function apiAddHistory(data) {
//   // return await uni.request({ url: '/api/history/add', method: 'POST', data })
// }
// async function apiDeleteHistory(id) {
//   // return await uni.request({ url: '/api/history/delete', method: 'POST', data: { id } })
// }
</script>

<style scoped>
.history-page {
  background: #fff;
  min-height: 100vh;
}
.header {
  display: flex;
  align-items: center;
  height: 100rpx;
  background: #fff;
  box-shadow: 0 8rpx 24rpx rgba(25, 195, 60, 0.08);
  padding: 0 32rpx;
  position: relative;
}
.back {
  font-size: 48rpx;
  color: #19c37c;
  font-weight: bold;
  margin-right: 24rpx;
  cursor: pointer;
}
.title {
  font-size: 36rpx;
  color: #19c37c;
  font-weight: bold;
}
.section {
  margin: 40rpx 32rpx 0 32rpx;
}
.section-title {
  display: flex;
  align-items: center;
  font-size: 28rpx;
  color: #222;
  font-weight: bold;
  margin-bottom: 24rpx;
}
.section-line {
  width: 8rpx;
  height: 32rpx;
  background: #19c37c;
  border-radius: 4rpx;
  margin-right: 12rpx;
}
.history-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 2rpx solid #19c37c;
  border-radius: 18rpx;
  padding: 28rpx 24rpx;
  margin-bottom: 24rpx;
  background: #fff;
}
.history-info {
  display: flex;
  flex-direction: column;
}
.history-desc {
  font-size: 30rpx;
  color: #222;
  font-weight: bold;
  margin-bottom: 8rpx;
}
.history-date {
  font-size: 26rpx;
  color: #888;
}
.history-delete {
  margin-left: 24rpx;
  cursor: pointer;
  display: flex;
  align-items: center;
}
.add-btn-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  color: #19c37c;
  font-size: 32rpx;
  font-weight: bold;
  margin: 32rpx 32rpx 0 32rpx;
  cursor: pointer;
}
.add-icon {
  font-size: 40rpx;
  margin-right: 12rpx;
}
.add-text {
  font-size: 32rpx;
}
.modal-mask {
  position: fixed;
  left: 0; top: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.5);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.2s;
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
.modal {
  background: #fff;
  border-radius: 24rpx;
  padding: 48rpx 36rpx 36rpx 36rpx;
  width: 80vw;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  transform: translateY(40rpx) scale(0.98);
  opacity: 0;
  animation: modalPop 0.25s forwards;
}
.modal-animate {
  /* 触发动画 */
}
@keyframes modalPop {
  from {
    transform: translateY(80rpx) scale(0.95);
    opacity: 0;
  }
  to {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}
.modal-input {
  border: none;
  border-bottom: 2rpx solid #19c37c;
  font-size: 28rpx;
  color: #333;
  margin-bottom: 32rpx;
  padding: 12rpx 0;
  outline: none;
}
.modal-date-row {
  display: flex;
  align-items: center;
  margin-bottom: 32rpx;
}
.date-icon {
  font-size: 36rpx;
  margin-right: 16rpx;
  color: #888;
}
.date-text {
  font-size: 28rpx;
  color: #888;
}
.modal-btn {
  width: 100%;
  height: 88rpx;
  background: #19c37c;
  color: #fff;
  font-size: 36rpx;
  font-weight: bold;
  border-radius: 16rpx;
  box-shadow: 0 8rpx 24rpx rgba(25, 195, 60, 0.18);
  border: none;
}
</style> 